<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - Online Judge</title>
    <link rel="stylesheet" href="/css/register.css">
</head>
<body>
    <!-- 注册表单 -->
    <div class="form-container">
        <h2>用户注册</h2>
        
        <!-- 消息提示区域 -->
        <div id="message" class="message"></div>
        
        <form id="registerForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" 
                       placeholder="3-20个字符" required>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" 
                       placeholder="至少6个字符" required>
            </div>
            
            <div class="form-group">
                <label for="confirmPassword">确认密码</label>
                <input type="password" id="confirmPassword" name="confirmPassword" 
                       placeholder="再次输入密码" required>
            </div>
            
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" 
                       placeholder="your@example.com" required>
            </div>
            
            <button type="submit" class="btn" id="submitBtn">注册</button>
        </form>
        
        <div class="form-footer">
            已有账号？<a href="/login.html">立即登录</a>
        </div>
    </div>

    <script src="/js/auth.js"></script>
    <script>
        // 注册表单提交处理
        document.getElementById('registerForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // 获取表单数据
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const email = document.getElementById('email').value.trim();
            const submitBtn = document.getElementById('submitBtn');
            
            // 前端验证
            if (username.length < 3 || username.length > 20) {
                showMessage('message', '用户名长度必须在3-20个字符之间', 'error');
                return;
            }
            
            if (password.length < 6) {
                showMessage('message', '密码长度至少6个字符', 'error');
                return;
            }
            
            if (password !== confirmPassword) {
                showMessage('message', '两次输入的密码不一致', 'error');
                return;
            }
            
            // 禁用提交按钮，防止重复提交
            submitBtn.disabled = true;
            submitBtn.textContent = '注册中...';
            
            try {
                // 调用注册API
                const response = await fetch(`${API_BASE}/register`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password,
                        email: email
                    })
                });
                
                const result = await response.json();
                
                if (result.status === 0) {
                    // 注册成功
                    showMessage('message', '注册成功!3秒后跳转到登录页面...', 'success');
                    setTimeout(() => {
                        window.location.href = '/login.html';
                    }, 3000);
                } else {
                    // 注册失败
                    showMessage('message', result.msg || '注册失败，请重试', 'error');
                    submitBtn.disabled = false;
                    submitBtn.textContent = '注册';
                }
            } catch (error) {
                console.error('Register error:', error);
                showMessage('message', '网络错误，请稍后重试', 'error');
                submitBtn.disabled = false;
                submitBtn.textContent = '注册';
            }
        });
    </script>
</body>
</html>